<template>
	<view>
		<!--  -->
		<view class="process flex  align-center justify-center" @click="toMission">
			<x-lottie style="width:70rpx;height:70rpx" :option="{
				                path:require('../../../static/json/a.json')
				}" />
			<view style="margin-left: 10rpx;">
				<view style="color:#333333 ; font-size: 28rpx;">共厂家居</view>
				<view style="margin-top: '5rpx';font-size:20rpx;">智能小助手</view>
			</view>
		</view>
		<!-- 安装师傅 -->
		<view>
			<!-- 导航栏 -->
			<view class="nav" style="position: fixed;top: 0;background-color: #fFFFFF;width: 100%;z-index: 99;">
				<view class="flex justify-around" style="padding:0 160rpx;margin: 30rpx 0;">
					<view style="margin-right: 74rpx;position: relative;" v-for="(item,index) in navList" :key="index">
						<view class="flex navType" :class="navTindex==index ? 'navStyle' :''"
							@tap="navChild(index,item.id)">
							{{item.name}}
						</view>
						<image v-if="navTindex==index" class="img" src="/static/find/nav.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<!-- 新报价 -->
			<view v-if="navTindex==0" class="quotation">
				<view class="flex justify-between quotationOne align-center" v-for="(item,index) in quoteData"
					:key="index">
					<view class="flex align-center">
						<image :src="item.userAvatar" style="width: 100rpx;height: 100rpx;border-radius: 8rpx;" mode="">
						</image>
						<view style="line-height: 70rpx;margin-left: 30rpx;">
							<view style="font-size: 32rpx;">
								{{item.projectName}}
							</view>
							<view style="font-size: 28rpx;color: rgba(30,30,30,0.3);">
								{{item.type}} <text style="margin-left: 30rpx;">{{item.projectArea}}m²</text>
							</view>
						</view>
					</view>
					<view class="details" style="text-align: center;" @click="details()">
						<image src="../../../static/tabbar/search1.png"
							style="width: 48rpx;height: 48rpx;vertical-align: middle;" mode="">
						</image>
						<view style="font-size: 30rpx;font-weight: 400;margin-top: 10rpx;">详情</view>
					</view>
				</view>
			</view>
			<!-- 我的预约 -->
			<view v-if="navTindex==1" class="reservation">
				<view
					style="box-shadow: 0rpx 4rpx 32rpx 2rpx rgba(153,155,168,0.12);padding: 30rpx;margin-bottom: 60rpx;">
					<zeng-calen :actDay="actDay" :chooseDay="chooseDay" @onDayClick='onDayClick'></zeng-calen>
				</view>
				<view v-for="(item,index) in serviceData" :key="index">
					<view v-if="item.status == 2" class="flex justify-between align-center"
						style="margin: 30rpx 30rpx 0 30rpx;color: rgba(30,30,30,0.3);">
						<image style="width: 32rpx;height: 32rpx;" src="../../../static/tabbar/ing.png" mode=""></image>
						<text style="margin: 0 10rpx;width: 176rpx;">{{item.appointTime.slice(5, 16)}}</text>
						<text style="width: 480rpx;height: 1rpx;background: rgba(30,30,30,0.3);"></text>
					</view>
					<view v-if="item.status != 2" class="flex justify-between align-center"
						style="margin: 30rpx 30rpx 0 30rpx;color: #1F88FF;">
						<image style="width: 32rpx;height: 32rpx;" src="../../../static/tabbar/ing1.png" mode="">
						</image>
						<text style="margin: 0 10rpx;width: 176rpx;">{{item.appointTime.slice(5, 16)}}</text>
						<text style="width: 480rpx;height: 1rpx;background: #1F88FF;"></text>
					</view>
					<view class="flex justify-between reservationOne">
						<view class="flex align-center">
							<image :src="item.Image" style="width: 100rpx;height: 100rpx;border-radius: 8rpx;" mode="">
							</image>
							<view style="line-height: 70rpx;margin-left: 30rpx;">
								<view style="font-size: 32rpx;">
									{{item.projectName}}
								</view>
								<view style="font-size: 28rpx;color: rgba(30,30,30,0.3);">
									位置:{{item.address}}
								</view>
							</view>
						</view>
						<view class="bePresent flex justify-between align-center" @click="work()">
							<image src="../../../static/tabbar/chang.png" style="width: 48rpx;height: 48rpx;" mode="">
							</image>
							<text>开始作业</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actDay: [], //用户选择的日期
				chooseDay: [], //已被选中的数据
				type: '',
				// 安装师傅首页
				navTindex: 1,
				navList: [{
						name: '新报价',
						id: 0
					},
					{
						name: '我的预约',
						id: 1
					}
				],
				currentDate: '',
				dateArr: [{
					date: '2023-02-18',
					info: '320个'
				}],
				// 报价
				quoteData: [],
				// 预约
				serviceData: [],
			}
		},
		onReady() {

		},
		// 触底触发
		onReachBottom() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getFix(1, 10)
				this.getReservation(1, 10)
			}, 100);
		},
		onLoad(e) {
			this.type = this.$cache.get('type')
			let yy = new Date().getFullYear()
			let mm = new Date().getMonth() + 1
			let dd = new Date().getDate()
			this.currentDate = yy + "-" + mm + "-" + dd
			this.getFix(1, 10)
			this.getReservation(1, 10)
		},

		methods: {
			// 展开日历
			onDayClick(data) {
				let choose = data.date //用户点中的数据
				if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
					// 移除元素下标
					const index = this.actDay.indexOf(choose);
					//删除用户点击的日期
					this.actDay.splice(index, 1)
				} else if (this.chooseDay.includes(choose)) { //判断是否已经有预约
					this.getReservation(1, 10, choose)
					uni.showToast({
						title: "这个日期已经有预约了~",
						icon: "none"
					})
					const index = this.actDay.indexOf(choose);
					this.actDay.splice(index, 1)
				} else {
					const index = this.actDay.indexOf(choose);
					//删除用户点击的日期
					this.actDay.splice(index, 1)
					console.log('呆呆鸟', this.actDay)
					//替换用户点击的日期
					this.actDay.push(choose)
				}
			},
			// 安装师傅首页
			// 开始作业
			work() {
				this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orderDetail')
			},
			// 详情
			details() {
				this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orderDetail')
			},
			// 我的预约列表
			getReservation(num, size, choose) {
				let data = {
					pageNo: num,
					pageSize: size,
					choose: choose
				}
				this.$api.reservation(data).then((res) => {
					if (choose == undefined) {
						this.serviceData = res.data.result
						// console.log('呆呆鸟', this.serviceData)
						res.data.result.forEach((item) => {
							item.appointTime = this.$tools.fileTime(item.appointTime)
							this.chooseDay.push(item.appointTime.slice(0, 10))
						})
					} else {
						this.serviceData = []
						res.data.result.forEach((item) => {
							item.appointTime = this.$tools.fileTime(item.appointTime)
							this.chooseDay.push(item.appointTime.slice(0, 10))
							if (item.appointTime.slice(0, 10) == choose) {
								this.serviceData.push(item)
							}
						})
					}
					uni.stopPullDownRefresh();
				})
			},
			navChild(e, id) {
				this.navTindex = e
				if (id == 1) id = ''
			},
			getFix(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.fixIndex(data).then((res) => {
					this.quoteData = res.data.result.list
					// console.log('新报价', res)
					uni.stopPullDownRefresh();
				})
			},
			// 确定日期
			change(e) {
				this.currentDate = e.fulldate
				// console.log(e.fulldate, '哒哒哒污染');
			},
			toMission() {
				this.$tools.goPageNoAuth('/pages/information/gpt')
			},
		}
	}
</script>

<style scoped>
	/* 安装师傅首页 */
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	.bePresent {
		width: 232rpx;
		height: 88rpx;
		color: #fFFFFF;
		background: #492D22;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		padding: 24rpx;
		margin: auto 0;
	}


	.details {
		margin-top: 20rpx;
		height: 132rpx;
		color: #492D22;
		margin: auto 0;

	}

	.quotationOne {
		background-color: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		border-bottom: 1rpx solid rgba(30, 30, 30, 0.1);
		height: 262rpx;
	}

	.reservationOne {
		background-color: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		height: 262rpx;
	}

	.quotation,
	.reservation {
		background-color: #fff;
		margin-top: 245rpx;
	}

	.nav {
		padding-top: 100rpx;
	}

	.navStyle {
		font-size: 40rpx !important;
		color: #1E1E1E !important;
	}

	.navType {
		width: 120rpx;
		height: 58rpx;
		font-size: 36rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: rgba(30, 30, 30, 0.3);
		text-align: center;
		line-height: 58rpx;
	}

	.img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: 40rpx;
		transform: translate(-50%, -50%);
	}

	/* GPT */
	.process {
		position: fixed;
		width: 258rpx;
		height: 106rpx;
		background: #c3bfbf;
		border-radius: 63px;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px rgba(214, 214, 214, 0.5);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 80rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 180rpx;
		/*  #endif */
	}
</style>
